<!DOCTYPE html>
<html>
<head>
	<title>编辑题目</title>
	<meta charset="utf-8">
	<style>
		.mt{
			margin-top: 10px;
		}

		.tool-bar{
			margin:10px 0;
		}

		#select{
			margin-right: 20px;
		}
	</style>
</head>
<body>

	<div>
		<select id="period">
			<option>选择期数</option>
		</select>
		<span id="current_period"></span>
	</div>
	<div class="tool-bar">
		添加: <a id="select" href="/subject">选择题</a> <button id="question">问答题</button>
	</div>

	<button id="submit" class="mt">提交</button>

	<script type="text/html" id="static-opt">

	</script>

	<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/template.js') }}"></script>

	<script>	
		$(function(){

			var subject = {

				wrap : $(".subject-list"),

				optIndex : 0,

				max_period : {{maxPeriod}},

				current_period : {{current_period}},

				init : function(){

					var self = this;

					$("#select").on("click",function(){
						self.add();
					});	

					$("#create_period").click(function(){
						self.createPeriod();
					});

					$("#period").on("change",function(){
						var href = "/subject/" + this.value;
						window.location.href = href;
					})

					$("#submit").on("click",function(){
						self.submit();
					})

					$(".edit_select").on("click",function(){
						self.edit(this);
					})

					//创建期数列表
					this.optionList();
				},

				optionHtml : function(i){
					i += 1;
					return "<option value="+ i +">第"+ i +"期</option>";
				},

				optionList : function(){
					var len = this.max_period;

					var html = "";
					for(var i = 0; i < len--;){
						html += this.optionHtml(len);
					}
					$("#period").prepend(html);
				},

				add : function(){

					if(!this.current_period){
						alert("必须选择期数");
						return;
					}

					var html = template("static-opt",{});
					this.wrap[0].insertAdjacentHTML("beforeend",html);
					
					var last = $(".add-option:last");
					var option = new Option();

					last.click(function(){
						subject.addOption(this,option);
					})					
				},

				addOption : function(element,option){
					var item = option.create();
					$(element).next().append(item);
				},

				createPeriod : function(){	
					this.max_period++;
					var html = "<option value="+ this.max_period +">第"+ this.max_period +"期</option>";
					$("#period").prepend(html);
				},

				edit : function(elem){

					var self = this;
					var id = $(elem).attr("data-id");
					var commit = $(elem).next().show();
					var parent = $(elem).hide().parent();
					var item_len = parent.find(".option-list-item").length;
					var option = new Option(item_len);

					parent.removeClass("readonly");
					parent.find("textarea").attr("readonly",false);
					parent.find("input").attr("readonly",false);

					parent.find(".add-option").click(function(){
						var item = option.create();
						$(this).prev().append(item);
					})	

					commit.click(function(){
						self.editRelease(parent,id);
					})
				},

				editRelease : function(elem,id){

					var title = elem.find("textarea").val();
					var option = "";
					var all_opt = elem.find(".option-list-item");

					$.each(all_opt,function(k,v){
						var value =  $(v).find("input").val();
						if(value != ""){
							option += value + "###";
						}
					})

					var answer = elem.find(".answer-item input").val();

					if(!!(title.trim()) && !!(option.trim()) && !!(answer.trim())){
						models = {};
						models["title"] = title;
						models["option"] = option;
						models["answer"] = answer;
					}

					var data = {
						list : JSON.stringify(models)
					}

					$.ajax({
						url : "/edit_subject/" + id,
						type : "POST",
						data : data,
						success : function(){
							alert("编辑成功");
							window.location.reload();
						}
					})
				},

				submit : function(){
					
					var self = this;
					var newSub = $(".new-subject");
					var models = {};					
					
					$.each(newSub,function(i,e){

						var title = $(e).find("textarea").val();

						var option = "";
						var all_opt = $(e).find(".option-list-item");
						$.each(all_opt,function(k,v){
							var value =  $(v).find("input").val();
							if(value != ""){
								option += value + "###";
							}
						})

						var answer = $(e).find(".answer-item input").val();
						
						if(!!(title.trim()) && !!(option.trim()) && !!(answer.trim())){
							models[i] = {};
							models[i]["title"] = title;
							models[i]["option"] = option;
							models[i]["answer"] = answer;
							models[i]["period"] = subject.current_period;
						}
						
					});

					// release

					var data = {
						list : JSON.stringify(models)
					}

					$.ajax({
						url : '/subject/release',
						data : data,
						type : "POST",
						success : function(){
							self.wrap.empty();
							window.location.reload();
						},
						error : function(){
							alert("添加失败");
						}
					})

				}

			}

			subject.init();


			//global
			var ABC = "ABCDEFGHIJK";

			// 选项构造函数
			function Option(index){
				this.index = index || 0;
			}

			Option.prototype.create = function(value){
				var div = document.createElement("div");
				var input = document.createElement("input");
				var label = document.createElement("label");
				var current = ABC.charAt(this.index++);

				div.className = "option-list-item";
				label.innerHTML = current + ":";
				input.value = value || "";

				div.appendChild(label);
				div.appendChild(input);
		
				return div;
			}


			var set_options = !function(){
				
				return (function(){

					$.each($(".subject-options"),function(i,e){
						
						var arr = $(e).val().split("###");
						var option = new Option();
						$.each(arr,function(j,v){
							if(v.trim() != ""){
								var item = option.create(v);
								$(item).find("input").attr("readonly","true");
								$(e).next().append(item);
							}	
						})				
					})

				}());
			}();

		})
	</script>
	

</body>
</html>